<template>
  <div style="display: flex; justify-content: center; align-items: center;height: 50px">
    <el-button type="warning" :icon="ChatDotRound" @click="addUserDialog" style="margin: 0 auto;">分享一波
    </el-button>

  </div>
  <el-card v-for="(item, index) in ShareList" :key="index">
    <el-row>
      <el-col :span="2">
        序号： {{ item.id }}
      </el-col>
      <el-col :span="4">
        <el-image :src="item.shareAvatar" style="height: 130px;width: 100%"/>
      </el-col>
      <el-col :span="15">
        <div>
          <el-descriptions style="padding-top: 10px" title="分享内容:">
            <el-descriptions-item label="推荐商品:">{{ item.productId }}</el-descriptions-item>
            <el-descriptions-item label="描述:">{{ item.shareContent }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
      <el-col :span="3">
        <div v-if="item.userId == UserStore.id "  style="padding-top: 40px;padding-left: 30px">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/file/upload"
              :data="{ type: 'share', id: item.id }"
              :headers="{ token : UserStore.token  }"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <el-button class="btn-background-color-tupian"  size="small"  @click="">上传图片</el-button>
          </el-upload>
          <el-button  type="danger" :icon="Delete" @click="DeleteShare(item.id)" circle /><br><br><br>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-dialog   v-model="AddIsShowDialog" title="Warning" width="30%" align-center draggable destroy-on-close>
    <template #header>
      <h1>分享一波</h1>
    </template>
    <el-form :model="addShare">
      <el-form-item label="商品名称" prop="productId">
        <el-input
            v-model="addShare.productId"
            clearable
            placeholder="请您输入商品名称"
            size="large"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="shareContent">
        <el-input
            v-model="addShare.shareContent"
            type="textarea"
            clearable
            placeholder="请您输入描述"
            size="large"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button color="red" type="primary" @click="Addsubmit">确认</el-button>
        <el-button @click="Addclose">取消</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup lang="ts" name="Share">
import {onMounted, reactive, ref} from "vue";
import {ElMessage, UploadProps} from "element-plus";
import {ChatDotRound,Delete} from '@element-plus/icons-vue'
import {reqAddShare, reqDelateShare, reqShareList} from "@/api/share";
import useUserStore from "@/store/modules/user";
let UserStore = useUserStore();
const ShareList = ref([]);

const init = (async () => {
  var list = await reqShareList();
  ShareList.value = list.data;
})
const addShare = reactive({
  userId : UserStore.id,
  productId : "",
  shareAvatar: "",
  shareContent: ""
});
const AddIsShowDialog = ref(false);
const addUserDialog = (() =>{
  AddIsShowDialog.value = true;
})
const Addsubmit = ( async ( ) => {
  var res = await reqAddShare(addShare);
  if(res.code == 0){
    init();
    ElMessage.success("已分享");
    AddIsShowDialog.value = false;
  }else {
    ElMessage.error(res.message);
  }
})
const Addclose = (() =>{
  AddIsShowDialog.value = false;
})
const DeleteShare = (async (item : number)=>{
  var res = await reqDelateShare({id:item});
  if(res.code == 0){
    init();
    ElMessage.success("已删除");
  }else {
    ElMessage.error(res.message);
  }
})
const handleAvatarSuccess: UploadProps['onSuccess'] = () => {
  ElMessage.success('上传成功!');
  init();
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type == 'image/jpg'||rawFile.type == 'image/jpeg'||rawFile.type == 'image/svg'||rawFile.type == 'image/png'||rawFile.type == 'image/webp')) {
    ElMessage.error('图片必须是（jpg/jpeg/svg/png/webp）中任意的格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
onMounted(() => {
  init();
})
</script>


<style scoped lang="scss">
.btn-background-color-tupian{
  background-color: #7ea265;
  color: white;
  height: 22px;
  float: left;
}
</style>